<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>商品详情</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!--标准mui.css-->
    <link rel="stylesheet" href="../mui/hello-mui/css/mui.min.css">
    <!-- 扩展图标库 -->
    <link rel="stylesheet" href="../mui/hello-mui/css/icons-extra.css" type="text/css">
    <!-- de-css -->
    <link rel="stylesheet" href="../dece/css/de-css.css">
    
    <script src="../dece/js/app.js" type="text/javascript"></script>
    <script src="../dece/js/vue.js" type="text/javascript"></script>
    <script src="../dece/js/axios.min.js" type="text/javascript"></script>
    <!-- 引入饿了么样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入饿了么组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style type="text/css">
        .el-carousel__item h3 {
            color: #475669;
            font-size: 14px;
            opacity: 0.75;
            line-height: 150px;
            margin: 0;
        }
        .el-carousel__item:nth-child(2n) {
            background-color: #99a9bf;
        }
        .el-carousel__item:nth-child(2n+1) {
            background-color: #d3dce6;
        }
        /* 商品详情的样式 start */
        .goods_info {
            display: flex;
            flex-flow: column nowrap;
            padding: 10px;
            background: white;
            margin: 0 0 15px 0;
        }
        .goods_info > div:nth-child(1) {
            display: flex;
            flex-flow: row nowrap;
            height: 30px;
            color: red;
            font-size: 20px;
        }
        .goods_info > div:nth-child(1) > span {
            font-size: 24px;
        }
        .goods_info > div:nth-child(1) > div {
            background: #fb6878;
            color: white;
            height: 20px;
            font-size: 12px;
            padding: 0px 4px;
            margin: 3px;
            border-radius: 3px;
        }
        .goods_info > div:nth-child(2) {
            font-size: 12px;
            min-height: 24px;
            color: #888;
        }
        .goods_info > div:nth-child(3) {
            font-size: 14px;
            min-height: 26px;
            color: #051B28;
        }
        .goods_info > div:nth-child(4) {
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-between;
        }
        .goods_info > div:nth-child(4) > span {
            font-size: 12px;
            color: #999;
        }
        /* 商品详情的样式 end */
        /* 购买商品和加入购物车样式 start */
        .goods_buy {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 1;
            display: flex;
            flex-flow: row nowrap;
            justify-content: flex-end;
            height: 50px;
        }
        .goods_buy > button {
            width: 50%;
            font-size: 15px;
            color: white;
            border: 0px;
        }
        .goods_buy > button:nth-child(1) {
            background: #FF9500;
        }
        .goods_buy > button:nth-child(2) {
            background: #FF0036;
        }
        /* 购买商品和加入购物车样式 end */
        /* 购买商品数量 start */
        .buy_nunber {
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-between;
            align-items: center;
            background: white;
            padding: 0px 10px;
            height: 45px;
        }
        /* 购买商品数量 end */
    </style>
</head>

<body>
    
    <div id="app" v-cloak>
        <header class="mui-bar mui-bar-transparent">
            <a href="javascript:history.go(-1);" class="mui-icon mui-action-back mui-icon-left-nav mui-pull-left"></a>
            <h1 class="mui-title">商品详情</h1>
        </header>
        <template>
            <div class="block">
                <el-carousel height="300px">
                <el-carousel-item v-for="row in goods_detail_img" :key="row.id">
                    <img :src="'../mui/hello-mui/images/' + row.image" />
                </el-carousel-item>
                </el-carousel>
            </div>
        </template>
        <div class="mui-content">
            <div class="goods_info">
                <div>
                    ￥<span>{{goods_info.special_price}}</span>
                    <div v-show="goods_info.is_spe == 1">超级特惠</div>
                    <div v-show="goods_info.is_hot == 1">热销商品</div>
                    <div v-show="goods_info.is_new == 1">新品上市</div>
                </div>
                <div>
                    <label>价格:</label>
                    <del>¥{{goods_info.price}}</del>
                </div>
                <div>{{goods_info.goods_name}}</div>
                <div>
                    <span>快递：0.00元</span>
                    <span>月销量{{goods_info.sales}}</span>
                    <span>北京</span>
                </div>
            </div>
            <div class="buy_nunber">
                购买数量
                <template>
                    <el-input-number size="mini" v-model="buy_nunber" :min="1"></el-input-number>
                </template>
            </div>
            <div v-html="goods_info.content" style="width: 100%;">
                
            </div>
        </div>
        <div class="goods_buy">
            <button @click="addcar">加入购物车</button>
            <button @click="buynow">立即购买</button>
        </div>
    </div>
    <script type="text/javascript" charset="utf-8">
        new Vue({
            el: "#app",
            data: {
                api_host: de.api_host,
                goods_detail_img: [
                    {id: 1, image: 'yuantiao.jpg'},
                    {id: 2, image: 'muwu.jpg'},
                    {id: 3, image: 'cbd.jpg'},
                    {id: 4, image: 'shuijiao.jpg'}
                ],
                goods_info: {},
                buy_nunber: 1,
            },
            created: function (){
                // 验证是否登陆
                if (!de.auth_login()) {
                    de.href("../login.html");
                }
                this.goods_detail();
            },
            mounted: function (){

            },
            methods: {
                // 退出登陆
                logout: function (){
                    de.logout();
                },
                // 商品详情
                goods_detail: function (){
                    var the = this;
                    var id = de.get('id');
                    if (id == false) {
                        de.href('./index.html');
                    }
                    // 提交数据
                    axios.get(de.api.goods_detail + '&id=' + id).then(function (data){
                        var dd = data.data;
                        console.log(dd);
                        if (dd.code == 200) {
                            the.goods_info = dd.data;
                        }
                    }).catch(function (error) {
                        console.log(error);
                    });
                },
                // 加入购物车
                addcar: function (){
                    var the = this;
                    var login = de.auth_login();
                    // 打印数据
                    var obj = {token: login, id:the.goods_info.id, goods_num:the.buy_nunber};
                    console.log(obj);

                    // 提交数据
                    axios.post(de.api.order_addcar, {token: login, id:the.goods_info.id, goods_num:the.buy_nunber}).then(function (data){
                        var dd = data.data;
                        // console.log(dd);
                        if (dd.code == 200) {
                            alert(dd.info); 
                        }
                    }).catch(function (error) {
                        console.log(error);
                    });
                },
                // 立即购买
                buynow: function (){
                    var the = this;
                    var login = de.auth_login();
                    // 打印数据
                    var obj = {token: login, id:the.goods_info.id, goods_num:the.buy_nunber};
                    console.log(obj);

                    // 提交数据
                    axios.post(de.api.order_addcar, {token: login, id:the.goods_info.id, goods_num:the.buy_nunber}).then(function (data){
                        var dd = data.data;
                        // console.log(dd);
                        if (dd.code == 200) {
                            de.href('../shop/submit_order.html');
                        }
                    }).catch(function (error) {
                        console.log(error);
                    });
                },
            },
        });
    </script>
</body>

</html>